<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/dist/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/dist/css/layui.css">
    <script type="text/javascript" src="../static/dist/tableSelect.js"></script>
    <title>懒洋洋购物车</title>
    <style>
        .layui-table tbody tr {
            height: 150px; /* 设置表格每行的高度为150px */
        }

        .fixed-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
        }
         .layui-table img{
            max-width:300px
        }
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }

        .layui-table img {
            max-width: 150px; /* 调整图片最大宽度 */
            max-height: 150px; /* 调整图片最大高度 */
        }

    </style>
</head>

<body>
<div class="layui-row layui-bg-black">
    <div class="layui-col-md1 layui-bg-black">
        <a href="/">
            <img src="../static/logo.png" class="layui-logo" style="padding:2px">
        </a>
        <!--        <p style="padding:27px"></p>-->
    </div>
  <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <div class="layui-input-inline" style="width:850px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-warm" id="searchBtn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black">
        <ul class="layui-nav" style="padding:6px">
            {% if user %}
                <li class="layui-nav-item">
                    <a href="/user/manage"><img src="../static/yang.jpeg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/manage">订单信息</a></dd>
                        <dd><a href="/user/info">用户信息</a>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退了</a></dd>
                    </dl>
                </li>
            {% else %}

                <li class="layui-nav-item">
                    <a href="">注册/登录</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://localhost:5000/register">注册</a></dd>
                        <dd><a href="http://localhost:5000/login">登录</a></dd>
                    </dl>
                </li>
            {% endif %}
            <li class="layui-nav-item">
                <a href="/user/car">购物车</a>
            </li>
            <li class="layui-nav-item">
                <a href="/chat">客服<span class="layui-badge-dot"></span></a>
            </li>

        </ul>

    </div>
</div>
<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <a href="/show/shop?type=0">全部</a>
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
          <span class="layui-breadcrumb" lay-separator="|">
            <a href="/show/shop?type=1">酒水饮料</a>
            <a href="/show/shop?type=2">当季水果</a>
            <a href="/show/shop?type=3">面包糕点</a>
            <a href="/show/shop?type=4">肉干卤味</a>
            <a href="/show/shop?type=5">糖果果冻</a>
            <a href="/show/shop?type=6">膨化食品</a>
            <a href="/show/shop?type=7">饼干曲奇</a>
            <a href="/show/shop?type=8">坚果炒货</a>
            <a href="/show/shop?type=9">蛋糕甜品</a>
            <a href="/show/shop?type=10">蛋挞披萨</a>
         </span>

    </div>
</div>

<div class="layui-row  layui-main">
    <table class="layui-hide" id="test"></table>
</div>

<br><br><br><br><br><br><br><br>

</body>
<script type="text/javascript">
    var form = layui.form;
    form.render();
    var tableSelect = layui.tableSelect;


    tableSelect.render({
        elem: '#search',
        checkedKey: 'id',
        table: {
            url: '../node_modules/layui/table.json',
            cols: [[
                { type: 'radio' },
                { field: 'id', title: 'ID' },
                { field: 'username', title: '姓名' },
                { field: 'sex', title: '性别' }
            ]]
        },
        done: function (elem, data) {
            var NEWJSON = []
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.username)
            })
            elem.val(NEWJSON.join(","))
        }
    })
</script>

<div class="fixed-bottom">
    <div class="layui-row layui-bg-gray  layui-container" style="padding: 40px; display: flex; justify-content: flex-end; align-items: center;">
        <div class="total-price">
            <strong><span style="color: rgba(9,28,14,0.97); font-size: 32px">总价：</span></strong>
            <span id="totalPrice" style="color: rgba(255,87,29,1); font-size: 24px">0.00</span>
            <span style="color: rgba(255,87,29,1); font-size: 24px">元</span>
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div class="checkout-btn">
            <button class="layui-btn layui-btn-normal" id="checkoutBtn" style="font-size: 24px"><i class="layui-icon layui-icon-form" style="font-size: 24px"></i>结算</button>
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#searchBtn").click(function() {
        var keyword = $("#search").val();
        window.location.href = "/show/search?"+"keyword="+keyword;
    });
</script>
<script>
    layui.use(['table', 'jquery'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var total = 0; // 总价
        $.ajax({
            url: '/shopping/car',
            method: 'GET',
            success: function(response) {
                var cartItems = response.data;
                renderCartItems(cartItems);
            },
            error: function() {
                console.error('Error fetching cart items from server.');
            }
        });
        function renderCartItems(cartItems) {
            table.render({
                elem: '#test',
                cellMinWidth: 80,
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'good_id', width: 40, title: '商品id'},
                        {field: 'img_url', title: '商品图', templet: '#imgTpl'},
                        {field: 'name', width: 200, title: '商品名称'},
                        {field: 'price', title: '单价(元)'},
                        {field: 'number', title: '数量', toolbar: '#subBar'},
                        {field: 'subtotal', title: '小计（元）', toolbar: '#talBar'},
                        {fixed: 'right', width: 200, title: '操作', align: 'center', toolbar: '#operateBar'}
                    ]
                ],
                data:cartItems,
                done: function (res, curr, count) {
                    form.render(); // 渲染表单元素
                }
            });

        }

        // 监听数量减少按钮点击事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;

            if(layEvent === 'detail'){ //查看
            } else if(layEvent === 'del'){ //删除
                layer.confirm('懒洋洋提醒您：确定删除商品吗？', function(index){
                    obj.del();
                    layer.close(index);
                    //向服务端发送删除指令
                    calculateTotal(); // 重新计算总价
                });
            } else if(layEvent === 'decrease'){ //减少按钮点击事件
                var number = parseInt(data.number);
                if(number > 1){
                    number--;
                    data.number = number;
                    data.subtotal = data.price * number; // 更新小计
                    obj.update(data);
                    calculateTotal(); // 重新计算总价
                }
            } else if(layEvent === 'increase'){ //增加按钮点击事件
                var number = parseInt(data.number);
                number++;
                data.number = number;
                data.subtotal = data.price * number; // 更新小计
                obj.update(data);
                calculateTotal(); // 重新计算总价
            }
        });

        // 监听复选框选中状态改变事件
        table.on('checkbox(test)', function(obj){
            calculateTotal(); // 重新计算总价
        });

        function calculateTotal() {
            var checkStatus = table.checkStatus('test');
            var data = checkStatus.data;
            total = 0; // 重新计算总价
            layui.each(data, function(index, item){
                total += item.price * item.number;
            });
            $('#totalPrice').text(total.toFixed(2)); // 更新总价栏显示
        }

        // 监听复选框选中状态改变事件
        table.on('checkbox(test)', function(obj){
            var checkStatus = table.checkStatus('test');
            var data = checkStatus.data;
            total = 0; // 重新计算总价
            layui.each(data, function(index, item){
                total += item.price * item.number;
            });
            $('#totalPrice').text(total.toFixed(2)); // 更新总价栏显示
        });

        // 结算按钮点击事件
        $('#checkoutBtn').click(function(){
            var checkStatus = table.checkStatus('test');
            var data = checkStatus.data;

            $.ajax({
                url: '/user/order',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(response) {
                    console.log('Order submitted successfully');
                    window.location.href = '/user/manage';
                },
                error: function() {
                    console.error('Error submitting cart items to server.');
                }
            });
        });

    });

</script>
{% raw %}
<script type="text/html" id="subBar">
    <div class="number-btns">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="decrease"><i class="layui-icon layui-icon-subtraction"></i></a>
        <span class="number-text" style="font-size: 20px">{{d.number}}</span>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="increase"><i class="layui-icon layui-icon-addition"></i></a>
    </div>
</script>
{% endraw %}
{% raw %}
<script type="text/html" id="talBar">
    <span style="color: rgba(255,122,52,1); font-size: 20px;">{{ (d.price * d.number).toFixed(2) }}</span>
</script>
{% endraw %}
{% raw %}
<script type="text/html" id="imgTpl">
    <div><img src="{{ d.img_url }}" alt=""></div>
</script>

{% endraw %}
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"><strong>删除</strong></i></a>
</script>



</html>